<template>
    <div>
        <div>
            <div class="input">
                <el-input v-model="parmas.username"  @clear="clearable" @keyup.enter.native="Search" clearable @submit.native.prevent
                    placeholder="请输入审核人姓名" />
            </div>
            <el-button type="primary" style="margin: 20px;" @click="Search">查询</el-button>
        </div>
        <!-- <el-table :data="list" border style="width: 100%">
            <el-table-column prop="username" label="审核人" />
            <el-table-column prop="visitor" label="来访人" />
            <el-table-column prop="card" label="来访人电话" />
            <el-table-column prop="carnumber" label="来访车牌号" />
            <el-table-column prop="addtime" label="审核时间" />
            <el-table-column label="审核状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 2" class="ml-2" type="info">待二审</el-tag>
                    <el-tag v-else class="ml-2" type="success">终审通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" type="info" @click="godetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="parmas.page" v-model:page-size="parmas.pageSize"
                :page-sizes="[5, 10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div> -->
        <Table :tableData="tableData" :tableColumns="tableColumns" :tableConfig="tableConfig" @sizeChange="sizeChange"
            @pageChange="pageChange" @IDdetails="IDdetails">

        </Table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, reactive } from 'vue'
import router from '../../router';
import http from '../../api/excel'
import Table from '../../components/Table.vue'

const sizeChange = (val: number) => {
    console.log(`${val} items per page`)
    state.parmas.pageSize = val
    getList()
}
const pageChange = (val: number) => {
    console.log(`current page: ${val}`)
    state.parmas.page = val
    console.log(state.parmas.page);
    getList()
}

interface IState {
    parmas: any
    tableData: Array<any>
    // total: number
    tableColumns: [
        { prop: string; label: string },
        { prop: string; label: string },
        { prop: string; label: string },
        { prop: string; label: string },
        { prop: string; label: string },
        { prop: string; label: string },
    ];
    tableConfig: {
        selection: boolean;
        addButton: boolean;
        editButton: boolean;
        delButton: boolean;
        otherButton: boolean;
        AuditButton: boolean;
        isPagination: boolean;
        total: Number;
    };
}
const state = reactive<IState>({
    parmas: { page: 1, pageSize: 5, username: "" },
    tableData: [],
    // total: 0,
    tableColumns: [
        { prop: 'username', label: '审核人' },
        { prop: 'visitor', label: '来访人' },
        { prop: 'card', label: '来访人电话' },
        { prop: 'carnumber', label: '来访车牌号' },
        { prop: 'addtime', label: '审核时间' },
        { prop: 'status', label: '审核状态' },
    ],
    tableConfig: {
        // 全选
        selection: false,
        // 添加
        addButton: true,
        // 修改
        editButton: false,
        // 删除
        delButton: false,
        // 详情
        otherButton: true,
        AuditButton: false,
        isPagination: false,
        total: 0,
    },
})
const { parmas, tableData, tableColumns, tableConfig } = toRefs(state)
const getList = async () => {
    const res: any = await http.getauditlogList(state.parmas)
    if (res.code === 10000) {
        state.tableData = res.data.list
        tableConfig.value.total = res.data.total
    }
}
const IDdetails = async (data:any)=>{
    console.log(data);
    const res:any = await http.getauditlogdetails({id:data.logid})
    if(res.code===10000){
        router.push({ path:'/auddetails', query: { date: JSON.stringify(res.data) } })
    }
}
// input清空以后返回原来的值
const clearable = ()=>{
    getList()
}

const Search = () => {
    getList()
}
onMounted(() => {
    getList()
})


</script>

<style scoped lang="less">
:deep(.input) {
    width: 200px;
    height: 68px;
    float: left;
}

:deep(.el-pagination) {
    margin-top: 25px !important;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-input {
    height: 28px;
    margin-top: 20px;
    margin-left: 5px;
}

.el-button {
    height: 28px;
}

:deep(.cell) {
    text-align: center;
}
</style>